<template>
    <a-modal :title="title" v-model="visible"  width="30%" :maskClosable='false' :closable='false'>
        <div>
            <a-form>
                <a-form-item label="用户名" :labelCol="{ span: 3 }" :wrapperCol="{ span: 21 }">
                    <a-input v-model="name" placeholder="请输入用户名" />
                </a-form-item>
				<a-form-item label="登录账号" :labelCol="{ span: 3 }" :wrapperCol="{ span: 21 }">
                    <a-input v-model="account" placeholder="请输入登录账号" />
                </a-form-item>
				<a-form-item label="登录密码" :labelCol="{ span: 3 }" :wrapperCol="{ span: 21 }">
                    <a-input v-model="password" placeholder="请输入登录密码" />
                </a-form-item>
				<a-form-item label="登录手机" :labelCol="{ span: 3 }" :wrapperCol="{ span: 21 }">
                    <a-input v-model="phone" :maxLength="11" placeholder="请输入登录手机" />
                </a-form-item>
				<a-form-item label="所属村委" :labelCol="{ span: 3 }" :wrapperCol="{ span: 21 }">
					<a-select :getPopupContainer="e => {return e.parentNode || document.body}" v-model="areaName" placeholder="请选择所属村委">
						<a-select-option v-for="(item, index) in dictList" :key="index" :value="item.name">{{item.name}}</a-select-option>
					</a-select>
                </a-form-item>
				<a-form-item label="账号类型" :labelCol="{ span: 3 }" :wrapperCol="{ span: 21 }">
					<a-radio-group v-model="ifAdmin">
						<a-radio :value="1">管理</a-radio>
						<a-radio :value="0">普通</a-radio>
					</a-radio-group>
                </a-form-item>
            </a-form>
        </div>
        <template #footer>
            <a-button @click="onCancel">取消</a-button>
            <a-button type="primary" @click="onConfirm">确认</a-button>
        </template>
    </a-modal>
</template>
<script>
import { dataSource as ds } from '@/services'
import { isNull } from "@/utils/util"
export default {
	name: 'modal',
	data() {
		return {
			loading: false,
			visible: false,
			dictList: [],
			title: "",
			type: "",
			id: "",
			name: "",
			account: "",
			password: "",
			phone: "",
			areaName: "",
			ifAdmin: null
		}
	},
	methods: {
		getList(){
			this.loading = true
			ds.dictList({ dictEnum: 3 }).then(res => {
				if(res?.data?.code == 200) {
					this.loading = false
					this.dictList = res?.data?.data ?? []
				}
			})
		},
		open(e){
			const { title, type, id, name, account, password, phone, areaName, ifAdmin } = e
			this.title = title
			this.type = type
			this.id = id ?? ""
			this.name = name ?? ""
			this.account = account ?? ""
			this.password = password ?? ""
			this.phone = phone ?? ""
			this.areaName = areaName ?? ""
			this.ifAdmin = ifAdmin ?? null
			this.getList()
			this.visible = true
		},
		// 取消
		onCancel() {
			this.visible = false
		},
		// 新增/修改
		async onConfirm() {
			const { type, id, name, account, password, phone, areaName, ifAdmin } = this
			const phoneRex = /^1[3-9]\d{9}$/
			if (isNull(name)) {
				this.$message.error('请输入用户名称')
				return false
			} else if (isNull(account)) {
				this.$message.error('请输入登录账号')
				return false
			} else if (isNull(password)) {
				this.$message.error('请输入登录密码')
				return false
			} else if (isNull(phone)) {
				this.$message.error('请输入登录手机')
				return false
			} else if (!phoneRex.test(phone)) {
				this.$message.error('请输入正确格式登录手机')
				return false
			} else if (isNull(areaName)) {
				this.$message.error('请选择所属村委')
				return false
			} else if (isNull(ifAdmin)) {
				this.$message.error('请选择账户类型')
				return false
			} else {
				const params = {
					name,
					account,
					password,
					phone,
					areaName,
					ifAdmin
				}
				const res = type == 'add' ? await ds.addOrEditUser(params) : await ds.addOrEditUser({ ...params, id})
				console.log(res)
				if(res?.data?.code == 200){
					this.$message.success(type == 'add' ? '新增成功' : '修改成功')
					this.visible = false
					this.$emit('confirm')
				}
			}
		}
	}
}
</script>

<style lang="less">
.listTitle {
	display: flex;
	justify-content: space-between;
}
</style>